<script setup>
import { defineProps, ref } from 'vue'
const props = defineProps({
  title: String,
  current: { type: Object, default: () => '全部' },
  options: { type: Array, default: () => [] }
})

const current = ref(props.current)

function onSeled(item) {
  current.value = item
}
</script>
<template>
  <div class="flex flex-row justify-items-top border-bottom-1 border-200 py-2">
    <section class="pt-1 flex-none text-2xl mr-2">{{ props.title }} :</section>
    <Divider layout="vertical" />
    <div class="flex flex align-items-start gap-3">
      <Button
        class="border-noround flex-none font-bold"
        label="全部"
        @click="onSeled('全部')"
        :outlined="current != '全部'"
      />
      <section class="flex flex justify-content-start flex-wrap gap-3">
        <Button
          class="border-noround font-bold"
          v-for="item in props.options"
          :key="item"
          :label="item"
          @click="onSeled(item)"
          :outlined="current != item"
        />
      </section>
    </div>
  </div>
</template>
